<template>
  <div class="h-full bg-zinc-200 dark:bg-zinc-800 duration-400 xl:pt-1">
    <div
      class="max-w-screen-lg mx-auto bg-white dark:bg-zinc-900 duration-400 xl:rounded-sm xl:border-zinc-200 xl:dark:border-zinc-600 xl:border-[1px] xl:px-4"
    >
      <!-- 移动端 navbar 处理 -->
      <m-navbar v-if="isMobileTerminal" sticky :clickLeft="onNavbarLeftClick">
        精选会员
      </m-navbar>

      <div class="py-2 px-1">
        <h2
          class="text-center text-[34px] font-bold tracking-widest text-yellow-600"
        >
          精选VIP
        </h2>
        <p class="text-center text-lg text-yellow-500">
          升级精选VIP，畅想所有内容
        </p>
        <div
          class="flex justify-between mt-5 overflow-auto pb-2 scrollbar-thin scrollbar-thumb-zinc-200 dark:scrollbar-thumb-zinc-700 scrollbar-track-transparent"
        >
          <PayMenuItemVue
            v-for="item in payListData"
            :key="item.id"
            :hot="item.isHot"
            :select="item.id === currentData.id"
            :data="item"
            @click="onChangeCurrentPay"
          ></PayMenuItemVue>
        </div>
        <p class="mt-1 text-sm text-zinc-500">{{ currentData.desc }}</p>
        <!-- 支付 -->
        <payment-vue class="mt-4" :currentData="currentData" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted } from 'vue'
import { getPayList } from '@/api/pay.js'
import PayMenuItemVue from './components/pay-menu-item.vue'
import PaymentVue from './components/payment/index.vue'
import { isMobileTerminal } from '@/utils/flexibal.js'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
const store = useStore()
const router = useRouter()

onMounted(() => {
  getPayListData()
})
// 当前选中的项
const currentData = ref({})
// 当前的数据
const payListData = ref([])
// 获取当前的vip数据
const getPayListData = () => {
  getPayList().then(({ code, data }) => {
    if (code === 200) {
      payListData.value = data
      currentData.value = data[0]
    }
  })
}
// 移动端后退事件
const onNavbarLeftClick = () => {
  store.commit('app/changeRouterType', 'back')
  router.back()
}
// 选中事件
const onChangeCurrentPay = (item) => {
  currentData.value = item
}
</script>
<style scoped lang="scss"></style>
